<template>
    <a-card title="人员管理" style="width: 800px;pointer-events: all;">
        <a-tabs v-model:activeKey="activeKey">
            <!-- 物业人员管理 -->
            <a-tab-pane key="1" tab="物业人员管理">
                <div class="table-operations">
                    <a-button type="primary" @click="showAddModal('property')">
                        添加物业人员
                    </a-button>
                </div>
                <a-table size="small" bordered :columns="propertyColumns" :data-source="propertyStaff"
                    :pagination="pagination" style="max-height: 480px;">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'action'">
                            <a-space>
                                <a @click="showEditModal(record)">编辑</a>
                                <a class="danger" @click="deleteStaff(record)">删除</a>
                            </a-space>
                        </template>
                    </template>
                </a-table>
            </a-tab-pane>

            <!-- 外包人员管理 -->
            <a-tab-pane key="2" tab="外包人员管理">
                <div class="table-operations">
                    <a-button type="primary" @click="showAddModal('outsource')">
                        添加外包人员
                    </a-button>
                </div>
                <a-table size="small" bordered :columns="outsourceColumns" :data-source="outsourceStaff"
                    :pagination="pagination" style="max-height: 480px;">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'action'">
                            <a-space>
                                <a @click="showEditModal(record)">编辑</a>
                                <a class="danger" @click="deleteStaff(record)">删除</a>
                            </a-space>
                        </template>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
    </a-card>

    <!-- 添加人员编辑框 -->
    <a-modal v-model:open="staffModalVisible" :title="modalTitle" @ok="handleStaffModalOk"
        @cancel="handleStaffModalCancel" width="600px">
        <a-form :model="staffForm" ref="staffFormRef" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-form-item label="姓名" name="name">
                <a-input v-model:value="staffForm.name" />
            </a-form-item>
            <a-form-item label="性别" name="gender">
                <a-radio-group v-model:value="staffForm.gender">
                    <a-radio value="男">男</a-radio>
                    <a-radio value="女">女</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="工号" name="employee_id">
                <a-input v-model:value="staffForm.employee_id" />
            </a-form-item>
            <template v-if="activeKey === '1'">
                <a-form-item label="部门" name="department">
                    <a-select v-model:value="staffForm.department">
                        <a-select-option value="安保部">安保部</a-select-option>
                        <a-select-option value="工程部">工程部</a-select-option>
                        <a-select-option value="客服部">客服部</a-select-option>
                        <a-select-option value="行政部">行政部</a-select-option>
                    </a-select>
                </a-form-item>
            </template>
            <template v-else>
                <a-form-item label="外包公司" name="company">
                    <a-input v-model:value="staffForm.company" />
                </a-form-item>
            </template>
            <a-form-item label="职位" name="position">
                <a-input v-model:value="staffForm.position" />
            </a-form-item>
            <a-form-item label="联系电话" name="phone">
                <a-input v-model:value="staffForm.phone" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
import {
    getPropertyStaff,
    addPropertyStaff,
    updatePropertyStaff,
    deletePropertyStaff,
    getOutsourceStaff,
    addOutsourceStaff,
    updateOutsourceStaff,
    deleteOutsourceStaff
} from '../api/api';

const activeKey = ref('1');//当前标签页
const staffModalVisible = ref(false);//人员管理模态框是否显示
const modalTitle = ref('');//编辑标题
const staffFormRef = ref();// 用于获取表单实例，进行表单操作 

// 分页配置
const pagination = reactive({
    current: 1,
    pageSize: 8,
    total: 0,
    size: 'small',
    showSizeChanger: false,
    showQuickJumper: false,
    onChange: (page) => {
        pagination.current = page;
        fetchData();
    }
});

// 物业人员管理表格列配置
const propertyColumns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '性别', dataIndex: 'gender', key: 'gender' },
    { title: '工号', dataIndex: 'employee_id', key: 'employee_id' },
    { title: '部门', dataIndex: 'department', key: 'department' },
    { title: '职位', dataIndex: 'position', key: 'position' },
    { title: '联系电话', dataIndex: 'phone', key: 'phone' },
    { title: '操作', key: 'action' },
];

// 外包人员管理表格列配置
const outsourceColumns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '性别', dataIndex: 'gender', key: 'gender' },
    { title: '工号', dataIndex: 'employee_id', key: 'employee_id' },
    { title: '外包公司', dataIndex: 'company', key: 'company' },
    { title: '职位', dataIndex: 'position', key: 'position' },
    { title: '联系电话', dataIndex: 'phone', key: 'phone' },
    { title: '操作', key: 'action' },
];

// 人员管理表单数据
const staffForm = reactive({
    name: '',
    gender: '男',
    employee_id: '',
    department: '',
    position: '',
    phone: '',
    company: '',
    id: null,
});

// 物业人员列表
const propertyStaff = ref([]);
// 外包人员列表
const outsourceStaff = ref([]);

// 显示添加人员编辑框
const showAddModal = (type) => {
    modalTitle.value = type === 'property' ? '添加物业人员' : '添加外包人员';
    //重置表单
    staffFormRef.value?.resetFields();
    //清空id
    staffForm.id = null;
    //显示模态框
    staffModalVisible.value = true;
};

// 显示编辑人员编辑框
const showEditModal = (record) => {
    modalTitle.value = activeKey.value === '1' ? '编辑物业人员' : '编辑外包人员';
    staffForm.id = record.id;
    staffForm.name = record.name;
    staffForm.gender = record.gender;
    staffForm.employee_id = record.employee_id;
    staffForm.department = record.department;
    staffForm.position = record.position;
    staffForm.phone = record.phone;
    staffForm.company = record.company;
    staffModalVisible.value = true;
};

// 删除人员
const deleteStaff = async (record) => {
    try {
        const response = activeKey.value === '1'
            ? await deletePropertyStaff(record.id)
            : await deleteOutsourceStaff(record.id);

        if (response.code === 200) {
            message.success('删除成功');
            fetchData();
        }
    } catch (error) {
        message.error('删除失败');
    }
};

// 人员管理编辑框确定
const handleStaffModalOk = async () => {
    try {
        // 使用展开运算符 ... 创建 staffForm 的副本,这样做是为了不直接修改原始数据，保持数据清洁
        const formData = { ...staffForm };
        delete formData.id;
        // 通过检查 staffForm.id 是否存在来判断操作类型
        if (staffForm.id) {
            const response = activeKey.value === '1'
                ? await updatePropertyStaff(staffForm.id, formData)
                : await updateOutsourceStaff(staffForm.id, formData);
            if (response.code === 200) {
                message.success('更新成功');
            }
        } else {
            const response = activeKey.value === '1'
                ? await addPropertyStaff(formData)
                : await addOutsourceStaff(formData);
            if (response.code === 200) {
                message.success('添加成功');
            }
        }
        staffModalVisible.value = false;
        fetchData(); // 刷新表格数据
    } catch (error) {
        message.error(staffForm.id ? '更新失败' : '添加失败');
    }
};

// 人员管理编辑框取消
const handleStaffModalCancel = () => {
    staffModalVisible.value = false;
    // 清空表单中所有字段的值，恢复到初始状态
    staffFormRef.value?.resetFields();
    staffForm.id = null;
};

// 获取人员列表
const fetchData = async () => {
    try {
        const response = activeKey.value === '1'
            ? await getPropertyStaff()
            : await getOutsourceStaff();

        if (response.code === 200) {
            const data = response.data;
            pagination.total = data.length;

            // 用户切换页码或每页显示数量
            // 触发分页计算
            const start = (pagination.current - 1) * pagination.pageSize;
            const end = start + pagination.pageSize;
            //从完整数据中截取当前页的数据
            const currentPageData = data.slice(start, end);
            // 根据当前标签页类型，更新对应的数据
            if (activeKey.value === '1') {
                propertyStaff.value = currentPageData;
            } else {
                outsourceStaff.value = currentPageData;
            }
        }
    } catch (error) {
        message.error('获取数据失败');
    } finally {

    }
};

// 监听当前标签页变化
watch(activeKey, () => {
    fetchData();
});

// 挂载时获取人员列表
onMounted(() => {
    fetchData();
});
</script>

<style scoped>
.table-operations {
    margin-bottom: 16px;
}

.danger {
    color: #ff4d4f;
}

:deep(.ant-table-tbody > tr > td) {
    padding: 4px 8px;
    height: 32px;
}

:deep(.ant-table-thead > tr > th) {
    padding: 4px 8px;
    height: 32px;
}

:deep(.ant-form-item) {
    margin-bottom: 16px;
}

:deep(.ant-input),
:deep(.ant-select) {
    width: 100%;
}

/* 修改所有输入框聚焦时的背景色 */
:deep(.ant-input:focus),
:deep(.ant-input-focused),
:deep(.ant-select-focused .ant-select-selector),
:deep(.ant-input-number-focused),
:deep(.ant-select-selection:focus),
:deep(.ant-select-selection-focused) {
    background-color: #fff !important;
    border-color: #40a9ff;
}

/* 确保下拉框的背景色也是白色 */
:deep(.ant-select-selector) {
    background-color: #fff !important;
}
</style>